<template>
  <Layout desc="以el-input为例,进行组件二次封装">
    <MyInput
      ref="inputRef"
      v-model="inputValue"
      placeholder="请输入"
      class="mt-30"
    >
      <template #append>
        <span class="cursor-pointer" @click="handleClear">清空</span>
      </template>
    </MyInput>
  </Layout>
</template>

<script setup lang="ts">
import MyInput from './components/MyInput.vue'

const inputValue = ref('')
const inputRef = ref()

const handleClear = () => {
  inputRef.value.clear()
}
</script>

<style scoped lang="scss"></style>
